{% extends 'wanplus/base_nav_frame.html' %}
{% load staticfiles %}
{% block content %}
  <div id="wp-wangwangshow-list">
    <div class="row panel panel-default">
      <div class="panel-heading">
        <h4>汪汪show</h4>
      </div>
      <table class="table table-striped table-hover">
        <thead>
          <tr>
            <td>序号</td>
            <td>视频地址</td>
            <td>token</td>
            <td>视频封面</td>
            <td>用户昵称</td>
            <td>用户头像</td>
            <td>上传时间</td>
            <td>状态</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody id="wp-wangwangshow-table">
          <tr>
            <td data-id="1">1</td>
            <td>/dogtv/DOGE7004_H264_16-9_1920x1080_2000000bps.TS</td>
            <td>38e35af043ea793df18823d8b2e38dc9</td>
            <td><span class="glyphicon glyphicon-ok-sign"></span></td>
            <td>zhang_guoyu</td>
            <td><span class="glyphicon glyphicon-ok-sign"></span></td>
            <td>2015-06-14 09:08:01</td>
            <td><span class="glyphicon glyphicon-exclamation-sign"></span></td>
            <td><span class="edit-button glyphicon glyphicon-edit" data-token="38e35af043ea793df18823d8b2e38dc9"></span></td>
          </tr>
          <tr>
            <td>2</td>
            <td>/dogtv/DOGE7003_H264_16-9_1920x1080_2000000bps.TS</td>
            <td>6055c7180325886966fb6f22abd68cb6</td>
            <td><span class="glyphicon glyphicon-minus-sign"></span></td>
            <td>zhang_guoyu</td>
            <td><span class="glyphicon glyphicon-ok-sign"></span></td>
            <td>2015-06-15 12:08:00</td>
            <td><span class="glyphicon glyphicon-ok-sign"></span></td>
            <td><span class="edit-button glyphicon glyphicon-edit" data-token="6055c7180325886966fb6f22abd68cb6"></span></td>
          </tr>
          <tr>
            <td>3</td>
            <td>/dogtv/DOGE7066_H264_16-9_1920x1080_2000000bps.TS</td>
            <td>3c82c6337b0ff9e31c24f7ca2fea1a83</td>
            <td><span class="glyphicon glyphicon-ok-sign"></span></td>
            <td>zhang_guoyu</td>
            <td><span class="glyphicon glyphicon-ok-sign"></span></td>
            <td>2015-06-15 12:08:00</td>
            <td><span class="glyphicon glyphicon-ok-sign"></span></td>
            <td><span class="edit-button glyphicon glyphicon-edit" data-token="3c82c6337b0ff9e31c24f7ca2fea1a83"></span></td>
          </tr>
          <tr>
            <td>4</td>
            <td>/dogtv/DOGE7011_H264_16-9_1920x1080_2000000bps.TS</td>
            <td>bdb4efa1c6c23dcb9d086a33833ed389</td>
            <td><span class="glyphicon glyphicon-ok-sign"></span></td>
            <td>zhang_guoyu</td>
            <td><span class="glyphicon glyphicon-ok-sign"></span></td>
            <td>2015-06-15 12:08:00</td>
            <td><span class="glyphicon glyphicon-remove-sign"></span></td>
            <td><span class="edit-button glyphicon glyphicon-edit" data-token="bdb4efa1c6c23dcb9d086a33833ed389"></span></td>
          </tr>
          <tr>
            <td>5</td>
            <td>/dogtv/DOGE7021_H264_16-9_1920x1080_2000000bps.TS</td>
            <td>f439c50d8b979cdca7f8c142b7095377</td>
            <td><span class="glyphicon glyphicon-minus-sign"></span></td>
            <td>zhang_guoyu</td>
            <td><span class="glyphicon glyphicon-ok-sign"></span></td>
            <td>2015-06-15 12:08:00</td>
            <td><span class="glyphicon glyphicon-ok-sign"></span></td>
            <td><span class="edit-button glyphicon glyphicon-edit"></span></td>
          </tr>
          <tr>
            <td>6</td>
            <td>/dogtv/DOGE7020_H264_16-9_1920x1080_2000000bps.TS</td>
            <td>bdb4efa1c6c23dcb9d086a33833ed389</td>
            <td><span class="glyphicon glyphicon-ok-sign"></span></td>
            <td>zhang_guoyu</td>
            <td><span class="glyphicon glyphicon-ok-sign"></span></td>
            <td>2015-06-15 12:08:00</td>
            <td><span class="glyphicon glyphicon-ok-sign"></span></td>
            <td><span class="edit-button glyphicon glyphicon-edit"></span></td>
          </tr>
          <tr>
            <td>7</td>
            <td>/dogtv/DOGE7012_H264_16-9_1920x1080_2000000bps.TS</td>
            <td>3ecf6ec5f7097db871fd8b7e26a3d23b</td>
            <td><span class="glyphicon glyphicon-minus-sign"></span></td>
            <td>zhang_guoyu</td>
            <td><span class="glyphicon glyphicon-ok-sign"></span></td>
            <td>2015-06-15 12:08:00</td>
            <td><span class="glyphicon glyphicon-ok-sign"></span></td>
            <td><span class="edit-button glyphicon glyphicon-edit"></span></td>
          </tr>
          <tr>
            <td>8</td>
            <td>/dogtv/DOGE7018_H264_16-9_1920x1080_2000000bps.TS</td>
            <td>6c2e37c6b7234695b767b13295730cbe</td>
            <td><span class="glyphicon glyphicon-minus-sign"></span></td>
            <td>zhang_guoyu</td>
            <td><span class="glyphicon glyphicon-ok-sign"></span></td>
            <td>2015-06-15 12:08:00</td>
            <td><span class="glyphicon glyphicon-ok-sign"></span></td>
            <td><span class="edit-button glyphicon glyphicon-edit"></span></td>
          </tr>
          <tr>
            <td>9</td>
            <td>/dogtv/DOGE7013_H264_16-9_1920x1080_2000000bps.TS</td>
            <td>02f5e4534f9364582fcc37d862bb38fc</td>
            <td><span class="glyphicon"></span></td>
            <td>zhang_guoyu</td>
            <td><span class="glyphicon glyphicon-ok-sign"></span></td>
            <td>2015-06-15 12:08:00</td>
            <td><span class="glyphicon glyphicon-exclamation-sign"></span></td>
            <td><span class="edit-button glyphicon glyphicon-edit"></span></td>
          </tr>
          <tr>
            <td>10</td>
            <td>/dogtv/DOGE7015_H264_16-9_1920x1080_2000000bps.TS</td>
            <td>d459c92d4124b6655831f23b2cd0b6ae</td>
            <td><span class="glyphicon glyphicon-minus-sign"></span></td>
            <td>zhang_guoyu</td>
            <td><span class="glyphicon glyphicon-ok-sign"></span></td>
            <td>2015-06-15 12:08:00</td>
            <td><span class="glyphicon glyphicon-exclamation-sign"></span></td>
            <td><span class="edit-button glyphicon glyphicon-edit"></span></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
{% endblock %}
{% block jsscript %}
  <script type="text/javascript">

    var createStateIcon = function(className) {
      return $('<span />').addClass("glyphicon").addClass(className)
    };

    var createVideoCoverStateIcon = function(hasCover) {
      if (hasCover) {
        return createStateIcon("glyphicon-ok-sign");
      } else {
        return createStateIcon("glyphicon-minus-sign");
      }
    };

    var createReleaseStateIcon = function(state) {
      var icon = null;
      switch (state) {
        case 1:  //待审核
          icon = createStateIcon("glyphicon-ok-sign");
          break;
        case 2:  //已上线
          icon = createStateIcon("glyphicon-ok-sign");
          break;
        case 3:  //下架
          icon = createStateIcon("glyphicon-remove-sign");
          break;
        default:  //未发布
          icon = createStateIcon("glyphicon-exclamation-sign");
      }

      return icon;
    };

    var createPortraitStateIcon = function(hasPortrait) {
      if (hasPortrait) {
        return createStateIcon("glyphicon-ok-sign");
      } else {
        return createStateIcon("glyphicon-minus-sign")
      }
    };

    var createEditIconButton = function(token) {
      var icon = createStateIcon("glyphicon-edit");
      icon.addClass("edit-btn").data("token", token);
      icon.click(function(e) {
        window.location.href = "./wangwangba/show"
      });
      return icon;
    };

    $(document).ready(function(e) {
      $.ajax("./wangwangba/shows", {
        type : "get",
        dataType : "json",
        success : function(data) {

          if (data && data.data && data.data.list && data.data.list.length) {
            var tbody = $("#wp-wangwangshow-table");

            var list = data.data.list;
            var length = list.length;

            for (var i = 0; i < length; i++) {
              var item = list[i];
              var tr = $('<tr />');
              $(tr).append($('<td />').text("" + (i + 1)));
              $(tr).append($('<td />').text(item.videoUrl));
              $(tr).append($('<td />').text(item.token));
              $(tr).append($('<td />').append(createVideoCoverStateIcon(item.hasCover)));
              $(tr).append($('<td />').text(item.wxNickname));
              $(tr).append($('<td />').text(createPortraitStateIcon(item.hasPortrait)));
              $(tr).append($('<td />').text(item.datetime));
              $(tr).append($('<td />').text(createReleaseStateIcon(item.releaseState)));
              $(tr).append($('<td />').text(createEditIconButton(item.token)));
              $(tr).appendTo(tbody);
            }
          }

        },
        error : function() {
        }
      })
    });
  </script>
{% endblock %}